<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>公告管理</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/okadmin.css">

</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>公告列表</legend>
</fieldset>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">类型</label>
                        <div class="layui-input-inline">
                            <select name="noticeType" id="noticeType" style="float: left;position: relative;"
                                    lay-verify="noticeType">
                                <option value="0">普通公告</option>
                                <option value="1">轮播公告</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">起始时间</label>
                        <div class="layui-input-block">
                            <input type="text" placeholder="起始时间" id="startTime" name="startTime" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">终止时间</label>
                        <div class="layui-input-block">
                            <input type="text" placeholder="终止时间" id="endTime" name="endTime" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline more" style="display: none">
                        <label class="layui-form-label">ID</label>
                        <div class="layui-input-inline">
                            <input type="text" name="noticeId" id="noticeId" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline more" style="display: none">
                        <label class="layui-form-label">标题</label>
                        <div class="layui-input-inline">
                            <input type="text" name="title" id="title" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" title="显示更多" id="moreBtn"
                            type="0">
                        <i class="layui-icon">&#xe654;</i>
                    </button>
                    <div class="layui-inline">
                        <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search" id="selectsBtn">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-card-body">
            <table id="noticeList" lay-filter="noticeList" class="layui-table"></table>
        </div>
    </div>
</div>

<div style="display: none" id="carouselLayer">
    <fieldset class="layui-elem-field">
        <div class="layui-field-box">
            <img src="" width="1525" height="400" id="carousel" style="margin-left: 17px;">
        </div>
        <div style="margin: 0 auto;margin-top: 20px;margin-bottom: 20px" >
            <div class="layui-upload">
                <button type="button" class="layui-btn layui-btn-normal" id="imgSet" style="margin-left: 45%;">选择文件</button>
                <button type="button" class="layui-btn" id="updateImg">开始上传</button>
            </div>
        </div>
    </fieldset>
</div>

<script src="../../lib/layui/layui.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/application.js"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="show">显示</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    var carouselSet;
    var noticeId="";
    layui.use(['table', 'laydate','layer','upload'], function () {
        var table = layui.table,
            $ = layui.$,
            form = layui.form,
            layer=layui.layer,
            upload=layui.upload,
            laydate = layui.laydate;
        //日期
        laydate.render({
            elem: '#startTime',
            trigger: 'click'
        });

        laydate.render({
            elem: '#endTime',
            trigger: 'click'
        });


        //获取表格数据
        var noticeTable=table.render({
            elem: '#noticeList',
            url: mainUri + '/notice/selects', //数据接口
            where:{noticeType:0},
            cols: [[ //表头
                {field: 'noticeId', title: 'ID'},
                {field: 'title', title: '标题'},
                // {field: 'content', title: '内容',templet:function(d){
                //     var content=d['content'];
                //     content=content.replaceAll('src="http://localhost:8080','src="'+MainIP)
                //         return content;
                // }},
                {field: 'createDate', title: '时间'},
                {field: 'noticeType', title: '公告类型',templet:function(d){
                    if(carouselSet==undefined){
                        carouselSet =function(nId,nImg){
                            noticeId=nId;
                            if(isNoEmpty(nImg)){
                                $('#carousel').attr('src', mainUri+nImg);
                            }
                            layer.open({
                                type: 1,
                                title: '轮播照片修改',
                                content: $('#carouselLayer'),
                                area: ['1600px', '600px']
                            })
                        }
                    }
                    if(d['noticeType']=='1'){
                        if(!isNoEmpty(d['noticeImg'])){
                            d['noticeImg']='';
                        }
                        return "轮播公告"+'<a style="margin-left: 5px" onclick="carouselSet(\''+d['noticeId']+'\',\''+d['noticeImg']+'\')" class="layui-btn layui-btn-xs layui-bg-blue carouselSet">图片设置</a>'
                    }
                    return "普通公告"
                    }},
                {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]],
            page: {
                layout: ['prev', 'page', 'next', 'skip', 'count'],
                groups: 3,
                limit: 15,
                theme: '#1E9FFF',
            },
        });
        //监听行工具事件
        table.on('tool(noticeList)', function(obj){
            var data = obj.data;
            // console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('确定删除该条信息', function (index) {
                        myAjax(mainUri+"/notice/delete",{noticeId:data['noticeId']},function(d){
                            if(d['code']=='0'){
                                layer.msg(d['msg'], {
                                    icon: 1, time: 2000, end: function () {
                                        noticeTable.reload();
                                        layer.closeAll();
                                    }
                                })
                            }else{
                                alert(d['msg'])
                            }
                        })
                });
            } else if(obj.event === 'show'){
                data['content']=data['content'].replaceAll('src="http://localhost:8080','src="'+MainIP)
                var width=document.body.clientWidth/2
                layer.open({
                    title: data['title'],
                    area: [width.toString()+'px', '500px'],
                    content: data['content']
                });
            }
        });


        //选完文件后不自动上传
        var uploadInst=upload.render({
            elem: '#imgSet'
            ,url: mainUri+'/notice/fileUpload' //改成您自己的上传接口
            ,auto: false
            , accept: 'images'
            , acceptMime: 'image/jpg,image/png,image/bmp,image/jpeg'
            , exts:'jpg|png|bmp|jpeg'
            ,bindAction: '#updateImg'
            , choose: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#carousel').attr('src', result); //图片链接（base64）
                });
            }
            ,//上传前的回调
            before: function () {
                this.data = {
                    noticeId: noticeId
                }
                showloading(true)
            }
            , done: function (res) {
                showloading(false)
                if(res['code']==0){
                    layer.msg(res['msg']);
                    setTimeout(function () {
                        noticeTable.reload()
                        layer.closeAll()
                    }, 1500);
                }else{
                    layer.msg(res['msg']);
                }
            }
            , error: function () {
                showloading(false)
                if (confirm('上传失败,是否重试')) { //只有当点击confirm框的确定时，该层才会关闭
                    uploadInst.upload();
                }
            }
        });

        /**
         * 搜索按钮
         */
        $("#selectsBtn").on('click', function () {
            var noticeType = $("#noticeType").find("option:checked").val();//类型
            var startTime = $("#startTime").val();//开始时间
            var endTime = $("#endTime").val();//结束时间
            var noticeId = $("#noticeId").val();//id
            var title = $("#title").val();//标题
            var data = {
                noticeType: noticeType,
                startTime: startTime,
                endTime: endTime,
                noticeId: noticeId,
                title: title,
            }
            noticeTable.reload({
                where: data,
            });
        })


        /**
         * 修改更多按钮
         */
        function changeMoreBtn() {
            var btn = $("#moreBtn");
            if (btn.attr("type") == '1') {
                btn.html(" <i class=\"layui-icon\">&#xe654;</i>\n")
                btn.attr('type', '0')
                btn.attr('title', '显示更多')
            } else {
                btn.html(" <i class=\"layui-icon\">&#xe67e;</i>\n")
                btn.attr('type', '1')
                btn.attr('title', '隐藏')
                $("#noticeId").val("");//id
                $("#title").val("");//标题
            }
        }

        /**
         * 更多按钮
         */
        $("#moreBtn").on('click', function () {
            $(".more").toggle('fast', changeMoreBtn());
        })


    });
</script>
</body>
</html>
`